/*
* @Author: syyao
* @Date: 2019-05-17 15:23:34
 * @Last Modified by: syyao
 * @Last Modified time: 2019-06-11 19:17:38
*/
<template>
    <div>
        <div style="height: auto;width: 100%;width:87%;margin:0 auto;">
            <div style="margin-top: 2vw;">
                <p
                    style="margin-top:1.8vw;font-size:1.2vw;color: #7A7A7A;font-family: DengXian"
                >Personal Center</p>
                <p
                    style="margin-top:0.1vw;font-size:2vw;color: #44519E;font-weight: bold;font-family: DengXian"
                >个人中心</p>
                <div style="margin-top:0.6vw;width: 10vw;height: 0.2vw;background-color:#45529F"></div>
                <div style="text-align:right">
                    <a v-on:click="t_personalMain" style="margin-left:1vw">展示板</a>
                    <a v-on:click="attention_click" style="margin-left:1vw">关注列表</a>
                    <a v-on:click="fans_click" style="margin-left:1vw;margin-right:0.2vw">粉丝列表</a>
                </div>
            </div>
        </div>
        <div style="width: 100% ; width:87%;margin:1.2vw auto 0 auto;">
            <Row style="height: 100%">
                <i-col span="5">
                    <div class="border">
                        <div id="person_image"></div>
                        <div id="person" style="width: 100%;height: 5vw">
                            <Row>
                                <i-col span="8">
                                    <img
                                        style="width: 4vw;margin-top: 1vw;margin-left:0.625vw; border-radius: 3vw;border:#2b85e4 2px solid;"
                                        :src="info.picture"
                                    >
                                </i-col>
                                <i-col span="16">
                                    <p
                                        style="margin-left: 1vw; margin-top: 2.2vw;font-size: 1.1vw;font-weight: bold;color: #44519E"
                                    >{{info.nickname}}</p>
                                </i-col>
                            </Row>
                        </div>
                        <div id="list" style="width: 100%;height: 2vw;margin-top: 2vw">
                            <Row style="height: 100% ;text-align: center">
                                <i-col
                                    span="8"
                                    style="height: 100%;border-right: rgba(0,0,0,0.15) 1px solid"
                                >
                                    <p style="color: #0CAADC;font-size: 1vw">{{postNumber}}</p>
                                    <p style="color: #A2A2A2">发布</p>
                                </i-col>
                                <i-col
                                    span="8"
                                    style="height: 100%;border-right: rgba(0,0,0,0.15) 1px solid"
                                >
                                    <p
                                        style="color: #0CAADC;font-size: 1vw"
                                        v-on:click="attention_click"
                                    >{{followingNumber}}</p>
                                    <p style="color: #A2A2A2" v-on:click="attention_click">关注</p>
                                </i-col>
                                <i-col span="8" style="height: 100%">
                                    <p
                                        style="color: #0CAADC;font-size: 1vw"
                                        v-on:click="fans_click"
                                    >{{fanNumber}}</p>
                                    <p style="color: #A2A2A2" v-on:click="fans_click">粉丝</p>
                                </i-col>
                            </Row>
                        </div>
                    </div>
                    <!-- <div class="border moveOn" style="height:3.5vw;margin-top: 2vw" v-on:click="t_personalMain">
                        <Row style="height: 100%">
                            <i-col span="8" style="height: 100%">
                                <img src="../assets/setting.png" style="width:2vw;margin-left:1.5vw;margin-top:0.7vw;">
                            </i-col>
                            <i-col span="16" style="height: 100%">
                                <p style="color: #44519E;font-size: 1vw;position: absolute;
                                 top: 50%; left: 0; transform: translateY(-50%);">概览</p>
                            </i-col>
                        </Row>
                    </div>-->
                    <div
                        class="border moveOn"
                        style="height:3.5vw;margin-top: 1.2vw"
                        v-on:click="personalManage"
                    >
                        <Row style="height: 100%">
                            <i-col span="8" style="height: 100%">
                                <img
                                    src="../assets/setting.png"
                                    style="width:2vw;margin-left:1.5vw;margin-top:0.7vw;"
                                >
                            </i-col>
                            <i-col span="16" style="height: 100%">
                                <p
                                    style="color: #44519E;font-size: 1vw;position: absolute;
                                 top: 50%; left: 0; transform: translateY(-50%);"
                                >账号管理</p>
                            </i-col>
                        </Row>
                    </div>
                    <div
                        class="border moveOn"
                        style="height:3.5vw;margin-top: 1.2vw"
                        v-on:click="t_personalMain"
                    >
                        <Row style="height: 100%">
                            <i-col span="8" style="height: 100%">
                                <img
                                    src="../assets/send.png"
                                    style="width:2vw;margin-left:1.5vw;margin-top:0.7vw;"
                                >
                            </i-col>
                            <i-col span="16" style="height: 100%">
                                <p
                                    style="color: #44519E;font-size: 1vw;position: absolute;
                                 top: 50%; left: 0; transform: translateY(-50%);"
                                >展示面板</p>
                            </i-col>
                        </Row>
                    </div>
                    <!-- <div
                        class="border moveOn"
                        style="height:3.5vw;margin-top: 1.2vw"
                        v-on:click="picturePostManage"
                    >
                        <Row style="height: 100%">
                            <i-col span="8" style="height: 100%">
                                <img
                                    src="../assets/send.png"
                                    style="width:2vw;margin-left:1.5vw;margin-top:0.7vw;"
                                >
                            </i-col>
                            <i-col span="16" style="height: 100%">
                                <p
                                    style="color: #44519E;font-size: 1vw;position: absolute;
                                 top: 50%; left: 0; transform: translateY(-50%);"
                                >发布管理</p>
                            </i-col>
                        </Row>
                    </div>-->
                </i-col>
                <i-col span="19">
                    <div class="border-right">
                        <div v-if="pannel==='main'">
                            <div style="margin:0 auto;width: 88%;">
                                <h2 style="margin-top: 2vw;">展示板</h2>
                                <Timeline style="margin-top:1vw">
                                    <TimelineItem
                                        v-for="(movement,index) in movements"
                                        :key="index"
                                    >
                                        <p
                                            style="font-size:0.8vw;font-family: DengXian"
                                        >{{movement.time}}</p>
                                        <p
                                            style="font-size:0.9vw;font-family: DengXian;"
                                        >{{movement.title}}</p>
                                        <div
                                            style="width: 88%;margin: auto;column-count:2;column-gap:15px;column-fill:auto;"
                                        >
                                            <div
                                                v-for="(picture,index) in movement.path"
                                                :key="index"
                                                :picture="picture"
                                            >
                                                <div class="picPerHubStyle">
                                                    <div
                                                        class="picPerHub"
                                                        :style="'backgroundImage:url('+picture+')'"
                                                    ></div>
                                                </div>
                                            </div>
                                        </div>
                                    </TimelineItem>
                                </Timeline>
                            </div>
                        </div>
                        <div v-else-if="pannel==='changeInfo'">
                            <change :info="info"></change>
                        </div>
                        <!-- <div v-else-if="pannel==='pictureManage'">
                            <manage></manage>
                        </div>-->
                        <div v-else-if="pannel==='attention'">
                            <pattention :followings="follwing"></pattention>
                        </div>
                        <div v-else-if="pannel==='fans'">
                            <pfans :fans="fans"></pfans>
                        </div>
                    </div>
                </i-col>
            </Row>
        </div>
    </div>
</template>

<script>
import personalMain from "../components/personal/personalMain";
import changePersonalInfo from "../components/personal/changePersonalInfo";
import pictureManage from "../components/personal/pictureManage";
import pattention from "../components/personal/pattention";
import pfans from "../components/personal/pfans";

export default {
  name: "Person",
  data() {
    return {
      info: {},
      pannel: "",
      movements: [],
      fans: [],
      follwing: []
    };
  },
  components: {
    change: changePersonalInfo,
    pmain: personalMain,
    manage: pictureManage,
    pattention,
    pfans
  },
  created() {},
  mounted() {
    this.pannel = "main";
    let _this = this;
    this.http.post(this, "/getMovement").then(function(msg) {
      _this.movements = msg.data.data;
    });
    this.http.post(this, "/getConnerList").then(function(msg) {
      if (msg.data.code === "200") {
        _this.follwing = msg.data.data;
      }
    });
    this.http.post(this, "/getFansList").then(function(msg) {
      if (msg.data.code === "200") {
        _this.fans = msg.data.data;
      }
    });
    this.info = {
      ...this.$store.state.user.info
    };
  },
  updated() {},
  computed: {
    postNumber() {
      return this.movements.length;
    },

    followingNumber() {
      return this.follwing.length;
    },

    fanNumber() {
      return this.fans.length;
    }
  },
  methods: {
    personalManage() {
      this.pannel = "changeInfo";
    },
    picturePostManage() {
      this.pannel = "pictureManage";
    },
    t_personalMain() {
      this.pannel = "main";
      let _this = this;
      this.http.post(this, "/getMovement").then(function(msg) {
        _this.movements = msg.data.data;
      });
    },
    attention_click() {
      this.pannel = "attention";
      let _this = this;
      this.http.post(this, "/getConnerList").then(function(msg) {
        if (msg.data.code === "200") {
          _this.follwing = msg.data.data;
        }
      });
    },
    fans_click() {
      this.pannel = "fans";
      let _this = this;
      this.http.post(this, "/getFansList").then(function(msg) {
        if (msg.data.code === "200") {
          _this.fans = msg.data.data;
        }
      });
    }
  },
  watch: {
    "$store.state.user.info": function(newVal) {
      this.info = {
        ...newVal
      };
    }
  }
};
</script>

<style scoped>
.border {
  width: 15vw;
  height: 15vw;
  border: #e8e8e8 1px solid;
  box-shadow: rgba(0, 0, 0, 0.16) 8px 5px 6px;
  background-color: #ffffff;
}

.border-right {
  width: 45vw;
  min-height: 40vw;
  border: #e8e8e8 1px solid;
  margin-left: 5vw;
  box-shadow: rgba(0, 0, 0, 0.16) 8px 5px 6px;
  background-color: #ffffff;
}

p {
  font-weight: bold;
}

.moveOn:hover {
  box-shadow: rgba(0, 0, 0, 0.08) 8px 5px 6px;
}

#person_image {
  height: 4.5vw;
  width: 100%;
  background-image: url(../assets/person-image.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.picPerHub {
  background-image: url(../assets/l-bj.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 12vw;
  height: 12vw;
  border-radius: 10px;
}

.picPerHubStyle {
  margin-top: 18px;
  display: inline-block;
}

.picPerHubStyle img {
  width: 1vw;
  vertical-align: middle;
}

.picPerHubStyle span {
  margin-left: 0.8vw;
  font-size: 0.9vw;
  color: #1e1e1e;
  font-family: DengXian;
}
</style>